<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <!--<meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">-->
    <meta name="format-detection" content="telephone=no" />
    <title>沟通中</title>
    <link rel="stylesheet" type="text/css" href="__STATIC__/newcj/css/themes.css?v=2017129">
    <link rel="stylesheet" type="text/css" href="__STATIC__/newcj/css/h5app.css">
    <link rel="stylesheet" type="text/css" href="__STATIC__/newcj/fonts/iconfont.css?v=2016070717">
    <link rel="stylesheet" type="text/css" href="__STATIC__/newcj/css/chat_list.css">
    <script src="__STATIC__//newcj/js/jquery.min2.js"></script>
    <script src="__STATIC__/newcj/js/dist/flexible/flexible_css.debug.js"></script>
    <script src="__STATIC__/newcj/js/dist/flexible/flexible.debug.js"></script>
	<script src="__STATIC__/qqFace/js/jquery.qqFace.js"></script>
	<style>
		.qqFace { margin-top: -180px; background: #fff; padding: 2px; border: 1px #dfe6f6 solid; }
		.qqFace table td { padding: 0px; }
		.qqFace table td img { cursor: pointer; border: 1px #fff solid; }
		.qqFace table td img:hover { border: 1px #0066cc solid; }
	</style>

</head>
<body>
<div class='fui-page-group'>
    <div class="fui-statusbar"></div>
<div class='fui-page chat-page'>
	<div class="fui-header">
	    <div class="title">消息列表</div>
	    <div class="fui-header-right"></div>
	</div>

	<div class="fui-content navbar chat-fui-content" style="padding-bottom: 2rem;">
<!--		<div class="chat-list flex" >-->

<!--			<div class="chat-img"  style="background-image: url('http://www.hwqugou.cn/img/555.jpg')">-->
<!--				<span class="badge" style="top: -0.1rem;left: 80%;">1</span>-->
<!--			</div>-->
<!--			<div class="chat-info">-->
<!--				<p class="chat-merch flex">-->
<!--					<span class="title t-28">魔力克</span>-->
<!--					<span class="time">2017-12-14</span>-->
<!--				</p>-->
<!--				<p class="chat-text singleflow-ellipsis">你好</p>-->
<!--			</div>-->



<!--		</div>-->
	</div>
</div>
</div>
</body>
<script>

    var API_URL = "http://api.tp6.com/communication/";
    var fromid ={$fromid};

	ws =  new WebSocket("ws://127.0.0.1:8282");

	ws.onmessage=function(e){
		var message = eval("("+ e.data+")");

		switch (message.type){
			case  "init":
				var bild = '{"type":"bind","fromid":"'+fromid+'"}';
				ws.send(bild);
				list();
				return;
			case "text":
				$(".chat-fui-content").html("");
				list();
				return;
			case "say_img":
				$(".chat-fui-content").html("");
				list();
				return;

		}
	}

	function list(){
        $.post(
                API_URL+"get_list",
                {id:fromid},
                function(res){
                    console.log(res);

					$.each(res,function(index,content){

						if(content.countNoread==0){
							if(content.last_message.type==2){
								$(".chat-fui-content").append('<div onclick=redi("'+content.chat_page+'") class="chat-list flex" ><div class="chat-img"  style="background-image: url('+content.head_url+')"></div> <div class="chat-info"> <p class="chat-merch flex"> <span class="title t-28">'+content.username+'</span> <span class="time">'+content.last_message.time+'</span> </p> <p class="chat-text singleflow-ellipsis">新图片</p> </div></div>');
							}else {
								$(".chat-fui-content").append('<div onclick=redi("' + content.chat_page + '") class="chat-list flex" ><div class="chat-img"  style="background-image: url(' + content.head_url + ')"></div> <div class="chat-info"> <p class="chat-merch flex"> <span class="title t-28">' + content.username + '</span> <span class="time">' + content.last_message.time + '</span> </p> <p class="chat-text singleflow-ellipsis">' + replace_em(content.last_message.content) + '</p> </div></div>');
							}
						}else{
							if(content.last_message.type==2){
								$(".chat-fui-content").append('<div onclick=redi("' + content.chat_page + '") class="chat-list flex" ><div class="chat-img"  style="background-image: url(' + content.head_url + ')"> <span class="badge" style="top: -0.1rem;left: 80%;">' + content.countNoread + '</span> </div> <div class="chat-info"> <p class="chat-merch flex"> <span class="title t-28">' + content.username + '</span> <span class="time">' + content.last_message.time + '</span> </p> <p class="chat-text singleflow-ellipsis">新图片</p> </div></div>');
							}else {
								$(".chat-fui-content").append('<div onclick=redi("' + content.chat_page + '") class="chat-list flex" ><div class="chat-img"  style="background-image: url(' + content.head_url + ')"> <span class="badge" style="top: -0.1rem;left: 80%;">' + content.countNoread + '</span> </div> <div class="chat-info"> <p class="chat-merch flex"> <span class="title t-28">' + content.username + '</span> <span class="time">' + content.last_message.time + '</span> </p> <p class="chat-text singleflow-ellipsis">' + replace_em(content.last_message.content) + '</p> </div></div>');
							}
						}

					})

                },'json'
        )


    }


	function replace_em(str){

		str = str.replace(/\</g,'&lt;');

		str = str.replace(/\>/g,'&gt;');

		str = str.replace(/\n/g,'<br/>');

		str = str.replace(/\[em_([0-9]*)\]/g,'<img src="__STATIC__/qqFace/arclist/$1.gif" border="0" />');

		return str;

	}

    /**
     *根据时间戳格式化为日期形式
     */
    function mydate(nS){

        return new Date(parseInt(nS) * 1000).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");
    }

	function redi(url){
		window.location.href=url;
	}

</script>

</html>
